<template>
  <div>
    <!-- 头部 -->
    <a-form
      ref="searchRef"
      :hideRequiredMark="true"
      :model="searchForm"
      style="margin-bottom: 20px"
    >
      <a-row>
        <!-- 上线时间 -->
        <a-col :span="6">
          <a-form-item label="上线时间：">
            <a-range-picker @change="panelChange"></a-range-picker>
          </a-form-item>
        </a-col>
        <!-- 状态 -->
        <a-col :span="4" :offset="1">
          <a-form-item name="saleValue" label="状态：">
            <a-select
              ref="select"
              placeholder="请选择"
              allowClear
              v-model:value="searchForm.status"
              @change="handleChange"
              @focus="focus"
            >
              <a-select-option
                v-for="item in saleStatusOptions"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-col>
        <!-- 关键字 -->
        <a-col :span="6" :offset="1">
          <a-form-item name="saleValue" label="关键字">
            <a-input
              v-model:value="searchForm.keyWord"
              placeholder="根据编号，权益卡名称，权益卡类型查询"
              allowClear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-button type="primary" class="d-a-center" @click="search"
            >搜索</a-button
          ></a-col
        >
      </a-row>
    </a-form>
    <!-- 列表区域 -->
    <a-table
      :columns="columns"
      :data-source="memberList"
      bordered
      :loading="loading"
      :pagination="pagination"
    >
      <template #status="{ record }">
        <div>
          {{ ["待审核", "已通过", "已拒绝"][record.status] }}
        </div>
      </template>
      <template #stack="{ record, index }">
        <div
          v-has="{ a: $route, b: 2 }"
          @click="changeStack(record.status, index, record.id)"
        >
          <a-switch
            v-model:checked="record.status"
            :checkedValue="0"
            :unCheckedValue="1"
          />
        </div>
      </template>
      <template #operation="{ record }">
        <a-button
          type="link"
          danger
          v-has="{ a: $route, b: 1 }"
          @click="lookReview(record)"
          >查看</a-button
        >
        <a-button
          type="link"
          style="color: #37c0f7"
          v-has="{ a: $route, b: 1 }"
          @click="lookReview(record, '审核')"
          v-if="record.status !== 1 && record.status !== 2"
          >审核</a-button
        >
      </template>
    </a-table>
    <!-- 查看弹窗 -->
    <a-modal
      width="92%"
      v-model:visible="lookVisibleShow"
      :title="title"
      @cancel="cancleOrder('lookVisibleShow')"
    >
      <!-- 表单 -->
      <a-form
        style="padding-top: 20px"
        :hideRequiredMark="true"
        :model="orderForm"
      >
        <!-- 名称，类型 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item label="权益卡名称" style="margin-left: 60px">
              <a-input disabled v-model:value="orderForm.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="权益卡类型"
              style="margin-left: 155px"
              name="type"
            >
              <a-input v-model:value="orderForm.type" disabled></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 数量，营业额 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item label="发放数量" style="margin-left: 72px" name="num">
              <a-input disabled v-model:value="orderForm.num"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="营业额"
              style="margin-left: 179px"
              name="businessPrice"
            >
              <a-input
                v-model:value="orderForm.businessPrice"
                disabled
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 激活时间，使用时间 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="激活时间"
              style="margin-left: 72px"
              name="activateDay"
            >
              <a-input disabled v-model:value="orderForm.activateDay"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="使用时间"
              style="margin-left: 165px"
              name="useDay"
            >
              <a-input disabled v-model:value="orderForm.useDay"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 备注信息，提交时间 -->
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="备注信息"
              style="margin-left: 72px"
              name="remark"
            >
              <a-input disabled v-model:value="orderForm.remark"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12" :lg="12" :xs="10">
            <a-form-item
              label="提交时间"
              style="margin-left: 155px"
              name="createdAt"
            >
              <a-input disabled v-model:value="orderForm.createdAt"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="20">
          <a-col :span="12" :lg="10" :xs="10">
            <a-form-item
              label="会员卡折扣"
              style="margin-left: 72px"
              name="goodDiscount"
            >
              <a-input
                disabled
                v-model:value="orderForm.goodDiscount"
              ></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-row style="margin-left: 70px">
        <a-col :span="12" :lg="12" :xs="10" v-if="!editing">
          <a-form-item name="remark" :label="'服务项目：'">
            <span v-for="item in serviceList" :key="item.id">{{
              item.comboServiceName + "*" + item.comboServiceCount + ","
            }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <!-- 底部按钮 -->
      <template #footer>
        <div class="d-j-around">
          <!-- @click="visible = false" -->
          <a-button v-if="title == '查看'" @click="close" class="d-a-center"
            >关闭</a-button
          >
          <a-button
            v-if="title != '查看'"
            type="primary"
            @click="storeVisible = true"
            class="d-a-center"
            >拒绝</a-button
          >
          <a-button
            v-if="title != '查看'"
            type="primary"
            @click="saveRight(1)"
            class="d-a-center"
            >通过</a-button
          >
        </div></template
      >
    </a-modal>
    <!-- 拒绝原因 -->
    <a-modal
      :visible="storeVisible"
      @ok="saveRightCancel(2)"
      @cancel="storeVisible = false"
      okText="确定"
      title="拒绝原因"
    >
      <a-form ref="storeFormRef">
        <a-form-item name="consumableLists">
          <a-input v-model:value="cancelCause" placeholder=""></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from "vue";
import { message } from "ant-design-vue";
import * as api from "@/api/member/list.js";
export default {
  setup() {
    const data = reactive({
      cancelCause: "",
      memberList: [],
      searchForm: {},
      orderForm: {},
      serviceList: [], //服务项目列表
      lookVisibleShow: false,
      title: "",
      storeVisible: false,
      visible: false,
      number: "", //当前机构编号
      // editing1: false,
    });
    const columns = reactive([
      {
        title: "编号",
        dataIndex: "id",
        className: "table",
      },
      {
        title: "会员卡名称",
        dataIndex: "name",
        className: "table",
      },
      {
        title: "发放数量",
        dataIndex: "type",
        className: "table",
      },
      {
        title: "营业额",
        dataIndex: "num",
        className: "table",
      },
      {
        title: "提交时间",
        dataIndex: "createdAt",
        className: "table",
      },
      {
        title: "状态",
        dataIndex: "status",
        className: "table",
        slots: {
          customRender: "status",
        },
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        slots: {
          customRender: "operation",
        },
      },
    ]);
    //状态
    const saleStatusOptions = reactive([
      {
        name: "全部",
        id: "",
      },
      {
        name: "进行中",
        id: "0",
      },
      {
        name: "已结束",
        id: 1,
      },
    ]);
    // 页码
    const listPage = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });
    //分页器
    const pagination = computed(() => ({
      current: listPage.current,
      pageSize: listPage.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: listPage.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));
    //切换页码
    const handleTableChanges = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      listPage.current = pagination.current;
      listPage.pageSize = pagination.pageSize;

      //调方法接口
      init();
    };
    //关闭
    const close = () => {
      console.log(1);
      data.lookVisibleShow = false;
    };
    //搜索
    const search = () => {
      listPage.current = 1;
      init();
    };
    //日期选择
    const panelChange = (date, dateString) => {
      data.searchForm.startTime = dateString[0];
      data.searchForm.endTime = dateString[1];
    };
    //拒绝确定，审核通过
    const saveRight = (v) => {
      let obj = {
        id: data.number, //id目前为空
        status: v,
      };
      if (v == 2) {
        obj.cancelCause = data.cancelCause;
      }
      console.log("obj", obj);
      // debugger;
      api
        .updateVIPCardTempStatusAPI({
          ...obj,
        })
        .then((r) => {
          if (r.success) {
            message.success("操作成功");
            data.visible = false;
            data.storeVisible = false;
            data.lookVisibleShow = false;
            init();
          } else {
            console.log(1);
            message.warn("操作失败");
            data.visible = false;
            data.storeVisible = false;
            data.lookVisibleShow = false;
            init();
          }
        });
    };
    // 拒绝的确定按钮
    const saveRightCancel = (v) => {
      if (!data.cancelCause) {
        message.error("请输入原因");
        return;
      }
      saveRight(2);
    };
    //查看
    const lookReview = (item, title = "查看") => {
      data.lookVisibleShow = true;
      data.title = title;
      data.number = item.id;
      // data.editing1 = true; //查看时拒绝原因显示
      // data.EditDisable = !data.EditDisable;
      api.selectVipCardTempByIdAPI({ id: item.id }).then((res) => {
        console.log(res);
        if (res.success) {
          data.orderForm = { ...res.object };
          data.orderForm.goodDiscount = res.object.goodTempList[0].goodDiscount;
          data.serviceList = [...(res.object.goodTempList || [])];
          // console.log(data.orderForm, data.serviceList);
        }
      });
    };
    //审核列表数据
    async function init() {
      const obj = {
        pageNum: listPage.current,
        pageSize: listPage.pageSize,
        ...data.searchForm,
      };
      const res = await api.selectVIPCardListAPI(obj);
      // console.log(res);
      if (res.success) {
        //将每个元素的 key 属性设置为 number 属性的值
        res.object.list.map((el) => (el.key = el.number));
        data.memberList = res.object.list;
        listPage.total = res.object.total;
      }
      // console.log(data.memberList);
    }
    init();

    return {
      ...toRefs(data),
      saleStatusOptions,
      columns,
      pagination,
      handleTableChanges,
      lookReview,
      saveRightCancel,
      saveRight,
      search,
      panelChange,
      close,
    };
  },
};
</script>

<style></style>
